<!-- 订单管理 -->
<template>
  <div
    class="alert pagination dashboard-container order-list customer-list-box"
  >
    <div class="white">
      <el-form label-width="120px">
        <el-row>
          <!-- 订单编号 -->
          <el-col
            :span="8"
          ><div class="grid-content bg-purple">
            <el-form-item label="订单编号：">
              <el-input
                v-model="form.number"
                placeholder="请输入订单编号"
              ></el-input>
            </el-form-item></div></el-col>
          <!-- 订单状态 -->
          <el-col
            :span="8"
          ><div class="grid-content bg-purple-light">
            <el-form-item label="订单状态：">
              <el-select
                v-model="form.orderstatus"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in orderstatus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
          <!-- 付费状态 -->
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="付费状态：">
              <el-select
                v-model="form.payMoneyStatus"
                style="width:92%"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in payMoneyStatus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
          <!-- 发件人姓名 -->
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="发件人姓名：">
              <el-input
                v-model="form.name"
                placeholder="请输入发件人姓名"
              ></el-input>
            </el-form-item>
          </div></el-col>
          <!-- 发件人电话 -->
          <el-col
            :span="8"
          ><div class="grid-content bg-purple-light">
            <el-form-item label="发件人电话：">
              <el-input
                v-model="form.telephone"
                placeholder="请输入发件人电话"
              ></el-input>
            </el-form-item>
          </div></el-col>
          <!-- 发货人地址 -->
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="发件人地址：">
              <!-- 省 -->
              <el-select
                v-model="form.province"
                placeholder="请选择省"
                style="width:30%"
                @change="chang(form.province)"
              >
                <el-option
                  v-for="item in province"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <!-- 市 -->
              <el-select
                v-model="form.citys"
                placeholder="请选择市"
                style="width:30%"
                @change="chang(form.citys)"
              >
                <el-option
                  v-for="item in citys"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <!-- 区 -->
              <el-select
                v-model="form.area"
                style="width:30%"
                placeholder="请选择区"
              >
                <el-option
                  v-for="item in citys"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row>
          <!-- 收件人姓名 -->
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="收件人姓名：">
              <el-input
                v-model="form.name1"
                placeholder="请输入收件人姓名"
              ></el-input>
            </el-form-item>
          </div></el-col>
          <!-- 收件人电话 -->
          <el-col
            :span="8"
          ><div class="grid-content bg-purple-light">
            <el-form-item label="收件人电话：">
              <el-input
                v-model="form.telephone1"
                placeholder="请输入收件人电话"
              ></el-input>
            </el-form-item>
          </div></el-col>
          <!-- 收货人地址 -->
          <el-col :span="8"><div class="grid-content bg-purple">
            <el-form-item label="收件人地址：">
              <!-- 省 -->
              <el-select
                v-model="form.province1"
                placeholder="请选择省"
                style="width:30%"
                @change="chang(form.province1)"
              >
                <el-option
                  v-for="item in province"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <!-- 市 -->
              <el-select
                v-model="form.citys1"
                placeholder="请选择市"
                style="width:30%"
                @change="chang(form.citys1)"
              >
                <el-option
                  v-for="item in citys"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <!-- 区 -->
              <el-select
                v-model="form.area1"
                style="width:30%"
                placeholder="请选择区"
              >
                <el-option
                  v-for="item in citys"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div></el-col>
        </el-row>

        <el-row style="padding-left: 30px; padding-right: 30px;">
          <el-button
            type="danger"
            class="btn"
            @click="search"
          >搜索</el-button>
          <el-button
            class="btn"
            @click="reset"
          >重置</el-button>
        </el-row>
      </el-form>

    </div>
    <!-- 表单 -->
    <div class="white">
      <el-table
        :data="tableData"
        style="width: 100%;"
      >
        <el-table-column
          prop="id"
          label="序号"
          width="60"
        >
          <template v-slot="{row}">
            {{ tableData.indexOf(row)+1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="订单编号"
          width="160"
        >
        </el-table-column>
        <el-table-column
          prop="transportOrder.id"
          label="运单编号"
          width="130"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="下单时间"
          width="160"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="订单状态"
          width="90"
        >
          <template v-slot="{row}">
            <span v-if="row.status===23000">待取件</span>
            <span v-if="row.status===23001">已取件</span>
            <span v-if="row.status===23002">网点自寄</span>
            <span v-if="row.status===23003">网点入库</span>
            <span v-if="row.status===23004">待装车</span>
            <span v-if="row.status===23005">运输中</span>
            <span v-if="row.status===23006">网点出库</span>
            <span v-if="row.status===23007">待派送</span>
            <span v-if="row.status===23008">派送中</span>
            <span v-if="row.status===23009">已签收</span>
            <span v-if="row.status===23010">拒收</span>
            <span v-if="row.status===23011">已取消</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="senderName"
          label="发件人姓名"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="senderPhone"
          label="发件人电话"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="发件人地址"
          width="150"
        >
          <template v-slot="{row}">
            {{ row.senderProvince.name }}
            {{ row.senderCity.name }}
            {{ row.senderCounty.name }}
            {{ row.senderAddress }}
          </template>
        </el-table-column>
        <el-table-column
          prop="receiverName"
          label="收件人姓名"
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="receiverPhone"
          label="收件人电话"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="address1"
          label="收件人地址"
          width="120"
        >

          <template v-slot="{row}">
            {{ row.receiverProvince.name }}
            {{ row.receiverCity.name }}
            {{ row.receiverCounty.name }}
            {{ row.receiverAddress }}
          </template>
        </el-table-column>
        <el-table-column
          prop="pickupType"
          label="取件类型"
          width="100"
        >
          <template v-slot="{row}">
            {{ row.pickupType===1?"网点自寄":"上门取件" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="paymentMethod"
          label="付费类型"
          width="100"
        >
          <template v-slot="{row}">
            {{ row.paymentMethod===1?"预结":"到付" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="paymentStatus"
          label="付费状态"
          width="100"
        >
          <template v-slot="{row}">
            {{ row.paymentStatus===1?"未付":"已付" }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          <template v-slot="{row}">
            <el-button
              type="text"
              size="small"
              @click="
                $router.push(`edit-order?id=${row.id}`)
              "
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row
        type="flex"
        justify="center"
      >
        <el-col :span="12">
          <el-pagination
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="+total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </div>
  </div>

</template>
<script>
import { areaList } from '@/api/common'
import { orderList } from '@/api/order'
export default {
  data() {
    return {
      parentId: '',
      total: '',
      currentPage4: 4,
      page: 1,
      pageSize: 10,
      form: {
        // 订单编号
        number: '',
        // 订单状态
        orderstatus: '',
        // 付费状态
        payMoneyStatus: '',
        // 发件人姓名
        name: '',
        // 发件人电话
        telephone: '',
        // 省
        province: '',
        province1: '',
        // 市
        citys: '',
        citys1: '',
        // 区
        area: '',
        area1: '',
        // 收件人姓名
        name1: '',
        // 收件人电话
        telephone1: ''
      },
      // 订单选择
      orderstatus: [
        {
          'id': 23000,
          'name': '待取件'
        },
        {
          'id': 23001,
          'name': '已取件'
        },
        {
          'id': 23005,
          'name': '运输中'
        },
        {
          'id': 23008,
          'name': '派送中'
        },
        {
          'id': 23009,
          'name': '已签收'
        },
        {
          'id': 23010,
          'name': '拒收'
        },
        {
          'id': 230011,
          'name': '已取消'
        },
        {
          'id': 0,
          'name': '全部'
        }
      ],
      // 付费状态
      payMoneyStatus: [
        {
          id: 1,
          name: '未付'
        },
        {
          id: 2,
          name: '已付'
        }
      ],
      // 城市列表
      province: '',
      citys: '',
      tableData: []
    }
  },
  created() {
    this.orderList()
    this.areaList()
  },
  methods: {
    // 清空表单
    reset() {
      // 订单编号
      this.form.number = ''
      // 订单状态
      this.form.orderstatus = ''
      // 付费状态
      this.form.payMoneyStatus = ''
      // 发件人姓名
      this.form.name = ''
      // 发件人电话
      this.form.telephone = ''
      // 发件人省
      this.form.province = ''
      // 市
      this.form.citys = ''
      // 区
      this.form.area = ''
      // 收件人省
      this.form.province1 = ''
      // 市
      this.form.citys1 = ''
      // 区
      this.form.area1 = ''
      // 收件人姓名
      this.form.name1 = ''
      // 收件人电话
      this.form.telephone1 = ''
      this.orderList()
    },
    // 省
    async areaList() {
      const res = await areaList()
      console.log(res.data)
      this.province = res.data
    },
    // 市 //区
    async chang(id) {
      console.log(id)
      this.parentId = id
      const reset = await areaList({ parentId: this.parentId })
      console.log(reset)
      this.citys = reset.data
    },
    // 表格
    async orderList() {
      const res = await orderList({
        page: this.page,
        pageSize: this.pageSize
      })
      console.log(res.data.items)
      this.tableData = res.data.items
      this.total = res.data.counts
    },
    // 搜索
    async search() {
      const res = await orderList({
        id: this.form.number,
        page: 1,
        pageSize: 10,
        paymentStatus: this.form.payMoneyStatus,
        pickUpType: '',
        receiverCityId: this.form.citys1,
        receiverCountyId: this.form.area1,
        receiverName: this.form.name1,
        receiverPhone: this.form.telephone1,
        receiverProvinceId: this.form.province1,
        senderCityId: this.form.citys,
        senderCountyId: this.form.area,
        senderPhone: this.form.telephone,
        senderProvinceId: this.form.province,
        status: '',
        senderName: this.form.name
      })
      console.log(res)
      this.tableData = res.data.items
    },
    // 分页器
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.orderList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.orderList()
    }
  }
}
</script>
<style>

.white {
  border-radius: 5px;
  margin:10px 10px;
  background-color: #fff;
  padding: 20px 0;
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 20px;
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}
</style>

<style lang="scss" scoped>
.btn{
      padding: 12px 30px;
}
.order-list /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
</style>
